<template lang="html">
<div class="main">
  <div class="login" v-show="relogin">
    <router-link to="/settings"><label id="setupTiao"></label></router-link>
    <div class="deng">
      <label id="tou"></label>
      <router-link to="/logins" >点击登录</router-link>
      <router-view></router-view>
    </div>
  </div>
  <div id="yilogin" v-show="islogin">
    <div class="banners" :style ="noback">
      <router-link to="/settings"><label id="setupTiao"></label></router-link>
      <router-link to="/xinxis"><label id="xiaoxi"></label></router-link>
      <router-link to="/personals">
        <div class="person">
          <label :style ="perph"></label>
          <span>{{ nicheng }}</span>
        </div>
      </router-link>
        <div class="box">
          <div class="xiao" :style="xiao">
          <!-- <router-link to="/makexiaos"> -->
            <div class="makexiao" v-show='yxj' @click="addm()">
              <div class="tuwen">
                <span>制作小记</span>
              </div>
              <div class="messcontent">
                <span>只有最不重要的人才会想着要搞砸一个事情，只是因为，搞砸本身能让他们觉得自己一时似乎很重要。</span>
              </div>
            </div>
          <!-- </router-link> -->
          <!-- < to="/makexiaos"> -->
            <div class="makexiao" v-show='yxj' v-for="item in messdata" @click="push(item)">

              <div class="tuwen">
                <span>修改小记</span>
              </div>
              <div class="messcontent">
                <span>{{ item.xiaomess }}</span>
              </div>

            </div>
          <!-- </router-link> -->
          </div>
        </div>

    </div>
    <div class="shoucang">
      <div class="shouname">
        <label>我的收藏</label>
      </div>
      <div class="shoucontent" v-show='yqb'>
         <router-link to="/allDetials/hp">
           <div class="tuwen">
             <span class="icon-file-picture"></span>
             <label>图文</label>
           </div>
         </router-link>
         <router-link to="/allDetials/essay">
           <div class="wenzhang">
             <span class="icon-book"></span>
             <label>阅读</label>
           </div>
         </router-link>
         <router-link to="/allDetials/music">
           <div class="yinyue">
             <span class="icon-music"></span>
             <label>音乐</label>
           </div>
         </router-link>
         <router-link to="/allDetials/question">
           <div class="diantai">
             <span class="icon-headphones"></span>
             <label>问答</label>
           </div>
         </router-link>
      </div>
    </div>
    <router-link to="/guans">
      <div class="guanzhu">
         <span class="icon-users"></span>
         <label>我的关注</label>
         <img src="../../static/img/right.png" alt="">
         <span>0</span>
      </div>
    </router-link>
    <router-link to="/ges">
      <div class="gedan" v-show='ygd'>
        <span class="icon-play"></span>
        <label>歌单</label>
        <img src="../../static/img/right.png" alt="">
      </div>
    </router-link>
  </div>
  <Navb>
<<<<<<< HEAD

  </Navb>
=======

  </Navb>

>>>>>>> 7bfd43d3829a9c616619a2431c9c0daef115b5b7
</div>
</template>

<script>
import Navb from '../all/navbar'
var count = 0;
export default {
  components:{
    Navb
  },
  data() {
    return {
      islogin: false,
      nicheng: '',
      messdata: '',
      yxj: false,
      ygd: false,
      yqb: false,
      perph: '../../static/img/touxiang.jpg',
      perbaim: '../../static/img/loginback.jpg',
      noback: {
        backgroundImage: "url(../../static/img/loginback.jpg)",
        backgroundRepeat: "no-repeat",
        backgroundPosition: "center",
        backgroundSize: "380px 100% "
      },
      perph: {
        backgroundImage: "url(../../static/img/touxiang.jpg)",
        backgroundRepeat: "no-repeat",
        backgroundPosition: "center",
        backgroundSize: "100% 100%",
      },
      xiao: {
        height: "100%",
        width: "200px",
        display: "flex",
        margin: "auto",
        justifyContent: "space-around",
      }
    }
  },
  methods: {
    push(item) {
      // console.log('11'+item);
      this.$router.push({
        path: '/makexiaos/',
        query:{
          item:item.xiaomess,
          _id:item._id,
          adds:false
        }// 路径
      })
    },
    addm() {
      // console.log('11'+item);
      this.$router.push({
        path: '/makexiaos/',
        query:{
          adds:true
        }// 路径
      })
    }
  },
  computed: { // 计算属性
    relogin: function() {
      if (this.islogin == false) {
        return true
      } else {
        return false
      }
    }
  },
  created() {
    if (localStorage.getItem('bao') == 1) {
      this.islogin = true;
      // console.log(localStorage.getItem('username'));
      // console.log(localStorage.getItem('perphoto'));
      // console.log(localStorage.getItem('perbackimg'));
      this.noback.backgroundImage = 'url(' + localStorage.getItem('perbackimg') + ')';
      this.perph.backgroundImage = 'url(' + localStorage.getItem('perphoto') + ')'
      this.nicheng = localStorage.getItem('username');
    }
    this.axios.get('http://10.0.156.247:8888/mess?userid=' + localStorage.getItem('userids')).then(data => {
      console.log(data);
      // this.xiao.width='200'+200*data.config.data.length+'px';
      // console.log(data);
      this.messdata = data.data;
      if(this.messdata.code==0){
        this.messdata=''
      }
      this.xiao.width = 180 * (this.messdata.length + 1) + 'px'
      console.log("233234"+this.messdata);
      // console.log(this.xiao.width);
    })
    if (localStorage.getItem('xj') == 0) {
      console.log('hahha');
      this.yxj = true;
    } else {
      console.log('ddd');
      this.yxj = false;
    }
    if (localStorage.getItem('gd') == 0) {
      this.ygd = true;
    } else {
      this.ygd = false;
    }
    if (localStorage.getItem('qt') == 0) {
      this.yqb = true;
    } else {
      this.yqb = false;
    }
  }
}
</script>
<style media="screen">
body {
  margin: 0;
  padding: 0;
}
</style>
<style lang="css" scoped>
*{
  margin:0;
  padding: 0;
}
a{
  text-decoration: none;
}
/*未登录状态*/
#yilogin{
  background: #f5f3f3;
  /*height: 500px;*/
  padding-bottom: 3.8rem;
}
.login{
  height: 700px;
  position: relative;
  background: linear-gradient(to bottom right,#64363c,#f19483);
  color: white;
}
#setupTiao{
  position: absolute;
  height: 3.4rem;
  width: 3.4rem;
  background-image: url(../../static/img/46.png);
  top: 12px;
  left: 12px;
}
#xiaoxi{
  position: absolute;
  height: 3.4rem;
  width: 3.4rem;
  background-image: url(../../static/img/xinfeng.png);
  background-size: 2.7rem;
  background-size: 2.7rem;
  background-repeat: no-repeat;
  background-position: center;
  top: 12px;
  right: 12px;
}
.deng{
  position: absolute;
  top: 30%;
  left: 40%;
  height: 110px;
  width: 80px;
}
#tou{
  display: inline-block;
  height: 80px;
  width: 80px;
  background-image: url(../../static/img/tou.jpg);
  background-size: 80px,80px;
  border-radius: 50%;
}
.deng>a{
  color: white;
  text-decoration: none;
  font-size: 18px;
}

/*已登录状态*/
.banners{
  height: 380px;
  position: relative;
  position: relative;
}
.person{
  height: 30%;
  width: 25%;
  position: absolute;
  top: 5rem;
  left: 38%;
  /*border: 1px solid black;*/
  text-align: center;
}
.person>label{
  display: block;
  width: 80%;
  height: 66%;
  border-radius: 50%;
  margin: auto;
  margin-bottom: 0.5rem;
}
.person>span{
  color: white;
  font-size: 1.6rem;
}
.box{
  width: 100%;
  overflow: auto;
  height: 40%;
  position: absolute;
  top: 48%;
}
.xiao{
  /*width: 100%;*/
  /*height: 100%;
  width: 200px;
  display: flex;
  margin: auto;
  justify-content:space-around;*/

}
.makexiao{
  height: 100%;
  width: 140px;
  /*position: absolute;
  top: 48%;
  left: 30%;*/
  /*border: 1px solid black;*/
  text-align: center;
  padding: 0.2rem;
  border-radius: 0.2rem;
  background: white;
}
.makexiao .tuwen{
  height: 80%;
  background-image: url(../../static/img/xiaoji.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  margin-bottom: 0.5rem;
}
.makexiao .tuwen>span{
  height: 1.8rem;
  display: inline-block;
  width: 80%;
  border: 1px solid white;
  color: white;
  margin-top: 4rem;
  border-radius: 0.3rem;
  line-height: 1.8rem;
}
.makexiao .messcontent>span{
  color: black;
  font-size: 1.4rem;

}
.makexiao .messcontent{
  height: 12%;
  width: 100%;
  background: white;
  text-overflow:ellipsis;
  white-space:nowrap;
  overflow:hidden;
}

.shoucang{
  padding: 0 6%;
  margin-top: 0.6rem;
  height: 140px;
  width: 88%;
  background: white;
}
.shoucang>.shouname{
  height: 50px;
  line-height: 50px;
  text-align: left;
  color: black;
  font-size: 1.4rem;
}
.shoucang>.shoucontent{
  display: flex;
  height: 90px;
  justify-content:space-around;
  align-items:center;
}
.shoucang>.shoucontent div{
  display: flex;
  flex-direction:column;
}
.shoucang>.shoucontent div>span{
  height: 3.5rem;
  width: 3.5rem;
}
.guanzhu{
  margin-top: 0.6rem;
  height: 50px;
  background: white;
  line-height: 50px;
  padding: 0 6%;
  margin-top: 0.6rem;
  width: 88%;
  text-align: left;
}
.guanzhu span:last-of-type{
  float: right;
  margin-right: 1.0rem;
}
.guanzhu>span:first-of-type{
  color: #BDC0BA;
  vertical-align: middle;
  font-size: 1.8rem;
}
.guanzhu img{
  height: 1.0rem;
  width: 0.4rem;
  float: right;
  margin-top: 18px;
}
.guanzhu label{
  margin-left: 1rem;
  color: gray;
  vertical-align: middle;
}
.gedan{
  margin-top: 0.6rem;
  height: 50px;
  background: white;
  line-height: 50px;
  padding: 0 6%;
  margin-top: 0.6rem;
  width: 88%;
  text-align: left;
}
.gedan label{
  margin-left: 1rem;
  color: gray;
  vertical-align: middle;
}
.gedan>span{
  color: #BDC0BA;
  vertical-align: middle;
  font-size: 1.8rem;
}
.gedan img{
  height: 1.0rem;
  width: 0.4rem;
  float: right;
  margin-top: 18px;
}
.icon-headphones:before {
  content: "\e910";
  /*color: red;*/
  font-size: 3.5rem;
  color: #BDC0BA;
}
.icon-file-picture:before {
  content: "\e927";
  font-size: 3.5rem;
  color: #BDC0BA;
}
.icon-music:before {
  content: "\e911";
  font-size: 3.5rem;
  color: #BDC0BA;
}
.icon-users:before {
  content: "\e972";
  font-size: 1.8rem;
}
.icon-book:before {
  content: "\e91f";
  font-size: 3.5rem;
  color: #BDC0BA;
}
.icon-play:before {
  content: "\e912";
  font-size: 1.8rem;
}
.tab{
    position: fixed;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 3rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: pink;
    z-index: 1;
}
</style>
